<template>
  <view class="u-rela question-item">
    <block v-if="showAnswerIocn">
      <view
        class="question-answered"
        :style="[answeredStyle]"
        v-if="question.question_type != 6 && question.subjective == 1"
      >
        <u-image
          width="148rpx"
          height="148rpx"
          src="@/pageFound/static/images/exam_grade_icon.png"
          class="img"
          v-show="answerStatus != 2"
        ></u-image>
      </view>
      <view
        class="question-answered"
        :style="[answeredStyle]"
        v-if="question.question_type != 6 && !question.subjective"
      >
        <u-image
          width="148rpx"
          height="148rpx"
          src="@/pageFound/static/images/sure.png"
          class="img"
          v-show="question.answered && question.answer_right"
        ></u-image>
        <u-image
          width="148rpx"
          height="148rpx"
          src="@/pageFound/static/images/wrong.png"
          class="img"
          v-show="question.answered && !question.answer_right"
        ></u-image>
        <u-image
          width="148rpx"
          height="148rpx"
          src="@/pageFound/static/images/exam_notanswer_icon.png"
          class="img"
          v-show="!question.answered"
        ></u-image>
      </view>
    </block>

    <view class="question-header u-clearfix">
      <view class="type">{{ question.question_type_text }}</view>
      <view class="score" v-if="question.score">（{{ question.score }}分）</view>
      <view class="content">
        <rich-text :nodes="question.title"></rich-text>
      </view>
    </view>
    <view class="question-file" v-if="!$u.test.empty(question.material)">
      <view class="file-item" v-for="(item, index) in question.material" :key="index">
        <exam-video
          v-if="item.type === 'video'"
          :src="item.src"
          :title="`视频文件${index + 1}`"
          :index="`video_${question.id}_${index}`"
          :topicIndex="topicIndex"
        ></exam-video>
        <exam-audio
          v-if="item.type === 'audio'"
          :src="item.src"
          :title="`音频文件${index + 1}`"
          :index="`audio_${question.id}_${index}`"
          :topicIndex="topicIndex"
        ></exam-audio>
      </view>
    </view>

    <!-- 单选/判断 -->
    <view
      class="question-body question-choose"
      v-if="$edu.test.inArray(question.question_type, [1, 2])"
    >
      <exam-radio-group
        v-model="current_field"
        :active-color="globPrimaryColor"
        :disabled-color="globThemeColorDisabled"
        placement="column"
        :disabled="disabled"
      >
        <exam-radio
          :name="item.id"
          v-for="item in question.options"
          :key="item.id"
          :custom-style="{ paddingBottom: '48rpx' }"
        >
          <view class="choose-item__option u-clearfix">
            <view class="lebal">{{ item.key }}.</view>
            <view class="content">
              <rich-text :nodes="item.value"></rich-text>
            </view>
          </view>
        </exam-radio>
      </exam-radio-group>
    </view>

    <!-- 多选 -->
    <view
      class="question-body question-choose"
      v-if="$edu.test.inArray(question.question_type, [3, 4])"
    >
      <exam-checkbox-group
        v-model="current_field"
        :active-color="globPrimaryColor"
        :disabled-color="globThemeColorDisabled"
        placement="column"
        :disabled="disabled"
      >
        <exam-checkbox
          :name="item.id"
          v-for="item in question.options"
          :key="item.id"
          :custom-style="{ paddingBottom: '48rpx' }"
        >
          <view class="choose-item__option u-clearfix">
            <view class="lebal">{{ item.key }}.</view>
            <view class="content">
              <rich-text :nodes="item.value"></rich-text>
            </view>
          </view>
        </exam-checkbox>
      </exam-checkbox-group>
    </view>
    <!-- 填空题 -->
    <view class="question-body question-filling" v-if="question.question_type == 5">
      <view class="filling-item u-flex" v-for="(item, index) in question.options" :key="index">
        <view class="label">({{ item.number }})</view>
        <view class="input">
          <u-input v-model="current_field[index]" :disabled="disabled" border />
        </view>
      </view>
    </view>
    <!-- 材料题 -->
    <view class="question-body question-material" v-if="question.question_type == 6">
      <record-question
        v-for="item in question.topics"
        :key="item.id"
        :question="item"
        :disabled="disabled"
        :answerStatus="answerStatus"
        :exam-type="examType"
        :showAnswerIocn="showAnswerIocn"
        :value="questionValue(item)"
      ></record-question>
    </view>
    <!-- 完形填空 -->
    <view class="question-body question-protype" v-if="question.question_type == 7">
      <view class="u-flex u-col-top" v-for="(item, index) in question.topics" :key="index">
        <view class="protype-index">{{ index + 1 }}.</view>
        <exam-radio-group
          :value="questionValue(item)"
          :active-color="globPrimaryColor"
          :disabled-color="globThemeColorDisabled"
          :disabled="disabled"
          ref="examRadioGroup"
        >
          <exam-radio
            :name="option.id"
            v-for="option in item.options"
            :key="option.id"
            :custom-style="{
              marginRight: '30rpx',
              marginBottom: '30rpx',
            }"
          >
            <view class="protype-item__option u-clearfix">
              <view class="lebal">{{ option.key }}.</view>
              <view class="content u-line-1">
                <rich-text :nodes="option.value"></rich-text>
              </view>
            </view>
          </exam-radio>
        </exam-radio-group>
      </view>
    </view>
    <!-- 解答题 -->
    <view class="question-body question-answer" v-if="question.question_type == 8">
      <u-input
        v-model="current_field"
        type="textarea"
        border
        :height="240"
        :maxlength="300"
        :disabled="disabled"
      />
    </view>

    <!-- 分数 -->
    <view
      class="question-score"
      v-if="
        answerStatus == 2 &&
        examType != 4 &&
        (question.question_type == 6 || question.question_type == 8)
      "
    >
      <block v-if="question.question_type == 6">总</block>
      {{ `得分：${question.user_score}分` }}
    </view>

    <view v-if="question.question_type == 6" class="question-points">
      {{ `考点：${question.points}` }}
    </view>
    <record-parsing :parsing="question" v-if="question.question_type != 6"></record-parsing>
  </view>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
import examRadioGroup from './exam-radio-group.vue'
import examRadio from './exam-radio.vue'
import examCheckboxGroup from './exam-checkbox-group.vue'
import examCheckbox from './exam-checkbox.vue'
import examVideo from './exam-video.vue'
import examAudio from './exam-audio.vue'
import recordQuestion from './record-question.vue'
import recordParsing from './record-parsing.vue'
export default {
  name: 'record-question',
  components: {
    recordQuestion,
    recordParsing,
    examRadioGroup,
    examRadio,
    examCheckboxGroup,
    examCheckbox,
    examVideo,
    examAudio,
  },
  props: {
    // 试题数据
    question: {
      type: Object,
      default: () => {
        return {}
      },
    },
    // 绑定的值
    value: {
      type: [Array, String, Number],
    },
    // 禁用
    disabled: {
      type: Boolean,
      default: false,
    },
    // 答题状态
    answerStatus: {
      type: Number,
      default: 0,
    },
    // 是否显示作答图标
    showAnswerIocn: {
      type: Boolean,
      default: false,
    },
    // 试卷类型 3 考试/条卷练习
    examType: {
      type: [String, Number],
      default: 0,
    },
  },
  data() {
    return {
      current_field: this.value,
    }
  },
  watch: {
    value() {
      this.current_field = this.value
    },
  },
  computed: {
    ...mapState({
      topicIndex: (state) => state.examination.examIndex,
      examList: (state) => state.examination.examList,
    }),
    ...mapGetters({
      globPrimaryColor: 'designSetting/getGlobThemeColor',
      globThemeColorDisabled: 'designSetting/getGlobThemeColorDisabled',
      globNavbarHeight: 'projectSetting/globNavbarHeight',
      globStatusBarHeight: 'projectSetting/globStatusBarHeight',
    }),
    answeredStyle() {
      let top = 0
      if (this.question.topic_level == 1 || this.question.question_type == 7) {
        top = this.globNavbarHeight + this.globStatusBarHeight + uni.upx2px(16)
      } else {
        top = 0
      }
      return {
        top: top + 'px',
      }
    },
  },
  options: { styleIsolation: 'shared' },
  methods: {
    // 当前值
    questionValue(item) {
      let empty = null
      if (this.$edu.test.inArray(item.question_type, [1, 2, 8])) {
        if (this.$u.test.empty(item.answer_data)) {
          empty = ''
        } else {
          empty = item.answer_data.toString()
        }
      } else if (this.$edu.test.inArray(item.question_type, [3, 4, 5, 7])) {
        if (this.$u.test.empty(item.answer_data)) {
          empty = []
        } else {
          empty = item.answer_data
        }
      }
      return empty
    },
  },
}
</script>
<style lang="scss" scoped>
.question-answered {
  position: fixed;
  z-index: 99;
  right: 8rpx;
}
.question-header {
  line-height: 46rpx;
  margin-bottom: 30rpx;
  .type {
    float: left;
    font-size: 24rpx;
    font-weight: 400;
    color: #ffffff;
    height: 32rpx;
    line-height: 32rpx;
    padding: 0 10rpx;
    margin-top: 7rpx;
    @include bg-color;
  }
  .score {
    float: left;
    font-size: 28rpx;
    color: #303133;
  }
  .content {
    font-size: 28rpx;
    font-weight: 400;
    color: #303133;
  }
}
// 文件
.question-file {
  .file-item {
    margin-bottom: 24rpx;
  }
}
// 选择题
.question-choose {
  .choose-item__option {
    .lebal {
      float: left;
    }
  }
}
.question-filling {
  .filling-item {
    margin-bottom: 40rpx;
    .label {
      font-size: 30rpx;
      color: #303133;
      margin-right: 16rpx;
    }
    .input {
      flex: 1;
    }
  }
}
// 素材
.question-material {
  ::v-deep .question-item {
    border-top: 1px solid #f7f7f7;
    padding-top: 30rpx;
  }
  ::v-deep .question-answered {
    position: absolute;
    right: -24rpx;
  }
}
// 完型填空
.question-protype {
  .protype-index {
    font-size: 30rpx;
    color: #303133;
    margin-right: 16rpx;
  }
  .protype-item__option {
    .lebal {
      float: left;
    }
  }
}

.question-points {
  font-size: 28rpx;
  color: #303133;
}

// 分数
.question-score {
  margin-top: 40rpx;
  margin-bottom: 30rpx;
  font-size: 28rpx;
  font-weight: 400;
  color: #f54030;
  padding: 15rpx 20rpx;
  background: rgba(245, 64, 48, 0.03);
}
</style>
